<script setup lang="ts">
import { ref } from 'vue'
const textarea1 = ref('')
const textarea2 = ref('')
import type { TabPaneName } from 'element-plus'
const activeName = ref('first')



let tabIndex = 9
const editableTabsValue = ref('0')
const editableTabs = ref([
  {
    title: '底本',
    name: '0',
    content: '底本内容',
  },
  {
    title: '文本1',
    name: '1',
    content: '文本1内容',
  },
  {
    title: '文本2',
    name: '2',
    content: '文本2内容',
  },
  {
    title: '文本3',
    name: '3',
    content: '文本3内容',
  },
  {
    title: '文本4',
    name: '4',
    content: '文本4内容',
  },
  {
    title: '文本5',
    name: '5',
    content: '文本5内容',
  },
  {
    title: '文本6',
    name: '6',
    content: '文本6内容',
  },
  {
    title: '文本7',
    name: '7',
    content: '文本7内容',
  },
  {
    title: '文本8',
    name: '8',
    content: '文本8内容',
  },
  {
    title: '文本9',
    name: '9',
    content: '文本9内容',
  },
])
const loadExample = () => {
  const tabs = editableTabs.value
  const baseTab = tabs.find(tab => tab.name === '0')
  const text1Tab = tabs.find(tab => tab.name === '1')

  if (baseTab) {
    baseTab.content = `天地玄黃　宇宙洪荒　日月盈昃　辰宿列張　寒來暑往　秋收冬藏\n...` // 这里是简化的内容，实际内容请替换为完整的字符串
  }
  if (text1Tab) {
    text1Tab.content = `天地增加玄黃　宇宙洪荒　日月盈昃　辰宿改一　寒來暑往　秋收冬藏\n...` // 这里是简化的内容，实际内容请替换为完整的字符串
  }
}
const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}` // 增加标签索引
    editableTabs.value.push({
      title: '文本' + (parseInt(newTabName)), // 设置标题为"文本10"
      name: newTabName,
      content: '文本' + (parseInt(newTabName)) + '内容',
    })
    editableTabsValue.value = newTabName // 设置当前激活的标签为新添加的标签
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<template>
  <div class="contentComparison">
    <div class="top">
      <div class="title">多文本比对</div>
    </div>
    <div class="middle">
      <el-button type="primary" class="button" plain @click="loadExample">加载示例</el-button>
      <el-button type="primary" class="button" plain>清除标点</el-button>
      <el-button type="success" class="button" plain>进行比对</el-button>
      <el-button type="primary" class="button" plain>复制结果</el-button>
    </div>
    <div class="bottom">
      <el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit">
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
          <el-input v-model="textarea1" :placeholder="item.content" class="input"
            :autosize="{ minRows: 20, maxRows: 20 }" resize="none" type="textarea" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.contentComparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: clamp(40px, 2vw, 60px);
  font-weight: 600;
}

.middle {
  margin-top: 2vh;
}

.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 2vh;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30vw;
  margin: 0 2vw;
}

input {
  width: 30vw;
  height: 40vh;
}

.demo-tabs {
  width: 60vw;
  min-width: 400px;
  max-width: 900px;
}

.demo-tabs>.el-tabs__content {
  padding: 1vw;
  color: #6b778c;
  font-size: clamp(10px, 1.5vw, 20px);
  ;
  font-weight: 600;
}

@media (max-width:400px) {
  .contentComparison {
    width: 100%;
    margin-top: 10vh;
  }

  .title {
    font-size: 6vw;
  }

  .button {
    width: 70px;
  }

  .demo-tabs {
    width: 70vw;
    min-width: auto;
    max-width: none;
  }

}
</style>